<template>
	<div>
		
		<h1>课程详情</h1>


		<br />


		标题:{{ data.title }}

		<br />


		价格:{{ data.price }}

		<br />

		课程分类:{{ data.cid | myfilter }}

		<br />

		<video id="video" width="300" height="230" :src="src" controls = "controls" autoplay="autoplay" muted>
			

		</video>

		<br /><br /><br />

		<van-button @click="into">{{ msg }}画中画</van-button>


		<br /><br /><br />

		关注课程:<van-switch v-model="checked"  size="24px" />

		<br /><br /><br />

		课程打分:<van-rate v-model="value" icon="like" void-icon="like-o" @change="onChange" />


	</div>
</template>



<script>

import mycate from './mycate.vue';

export default{

	data(){

		return {

			data:{},
			id:"",
			src:"",
			msg:"进入",
			checked:true,
			value:3

		}

	},
	components:{
		mycate
	},
	filters:{

			myfilter:function(value){


				var cate = {1:'计算机课程',2:'计算机语言',3:'计算机算法'}


				return cate[value];


			}

	},
	mounted:function(){


		//接收参数
		this.id = this.$route.query.id;
		console.log('课程id是'+this.id);

		//获取数据
		this.get_data();

		this.get_flow();

		//递归向上查找
		const data = [{id:1,name:'计算机课程',children:[{id:2,name:'计算机语言',children:[{id:3,name:'计算机算法'}]}]}];


		let nodes = [];
function getParentNodes(id, tree) {
    _getParentNodes([], id, tree);
    return nodes;
}
 
function _getParentNodes(his, targetId, tree) {
    tree.some((list) => {
        const children = list.children || [];
        if (list.id === targetId) {
            nodes = his;
            return true;
        } else if (children.length > 0) {
            const history = [...his];
            history.push(list);
            return _getParentNodes(history, targetId, children);
        }
    })
}

		console.log(getParentNodes(3,data));


	},
	methods:{

		//打分动作
		onChange:function(value){

			this.$toast("您当前打分是:"+value);



		},
		//画中画功能
		into:function(){

			if(video !== document.pictureInPictureElement){

			video.requestPictureInPicture();

			this.msg = '退出';

		}else{

			document.exitPictureInPicture();

			this.msg = '进入';

		}


		},

		//获取关注状态
		get_flow:function(){


			this.axios.get("http://localhost:8000/getflow/",{params:{id:this.id,uid:localStorage.getItem('uid')}}).then((res) => {


				console.log(res);


				let bool = {'true':true,'false':false};


				this.checked = bool[res.data.state];

			});

		},
		get_data:function(){

			this.axios.get("http://localhost:8000/coursedetail/",{params:{id:this.id}}).then((res) => {


				console.log(res);

				this.data = res.data;

				this.src = "http://localhost:8000/static/upload/"+this.data.video;

				

			});



		},


	}

}
	


</script>


<style>
	



</style>